<template>
 <div class="invite-index-container">
   <div class="banner">
         <!-- <img src="./../../static/img/chain/bg.jpg"> -->
    </div>
    <!-- 招标大盒子 -->
    <div class="bidding-box">
       <!-- 招标物流 -->
         <div class="bidding-logistics">
            <span class="bidd-icon"></span>
            <a-tabs defaultActiveKey="1">
                  <a-tab-pane tab="招标单位" key="1">
                     <ul>
                        <li>
                            <h3>昆明 某某某物流公司</h3>
                            <p>主营业务:仓储、配送</p>
                            <div>
                                 <img src="./../../static/img/chain/tel.png">
                                 <span>010-6260-2000</span>
                            </div>
                        </li>
                         <li>
                            <h3>昆明 某某某物流公司</h3>
                            <p>主营业务:仓储、配送</p>
                            <div>
                                 <img src="./../../static/img/chain/tel.png">
                                 <span>010-6260-2000</span>
                            </div>
                        </li>
                         <li>
                            <h3>昆明 某某某物流公司</h3>
                            <p>主营业务:仓储、配送</p>
                            <div>
                                 <img src="./../../static/img/chain/tel.png">
                                 <span>010-6260-2000</span>
                            </div>
                        </li>
                         <li>
                            <h3>昆明 某某某物流公司</h3>
                            <p>主营业务:仓储、配送</p>
                            <div>
                                 <img src="./../../static/img/chain/tel.png">
                                 <span>010-6260-2000</span>
                            </div>
                        </li>
                     </ul>
                  </a-tab-pane>
                  <a-tab-pane tab="投标单位" key="2">
                    <ul>
                        <li>
                            <h3>昆明 某某某物流公司</h3>
                            <p>主营业务:仓储、配送</p>
                            <div>
                                 <img src="./../../static/img/chain/tel.png">
                                 <span>010-6260-2000</span>
                            </div>
                        </li>
                         <li>
                            <h3>昆明 某某某物流公司</h3>
                            <p>主营业务:仓储、配送</p>
                            <div>
                                 <img src="./../../static/img/chain/tel.png">
                                 <span>010-6260-2000</span>
                            </div>
                        </li>
                      </ul>
                  </a-tab-pane>
             </a-tabs>
        </div>
        <!-- 招标样书 -->
        <div class="sample-book">
            <div class="sample-title">
                 <span class="bidd-icon"></span>
                 <span>招标样书</span>
            </div>
            <ul>
                <li>
                         <nuxt-link :to="`/invite/tendering/book`">
                         <span></span>
                         <span>如何进行物流项目招投标</span>
                          </nuxt-link>
                         <span><a-icon type="download" title="点击下载"/></span>
                         <span>2019-04-03</span>
                   
                </li>
                <li>
                         <nuxt-link :to="`/invite/tendering/book`">
                         <span></span>
                         <span>如何进行物流项目招投标</span>
                          </nuxt-link>
                         <span><a-icon type="download" title="点击下载"/></span>
                         <span>2019-04-03</span>
                   
                </li>
                <li>
                         <nuxt-link :to="`/invite/tendering/book`">
                         <span></span>
                         <span>如何进行物流项目招投标</span>
                          </nuxt-link>
                         <span><a-icon type="download" title="点击下载"/></span>
                         <span>2019-04-03</span>
                   
                </li>
                <li>
                         <nuxt-link :to="`/invite/tendering/book`">
                         <span></span>
                         <span>如何进行物流项目招投标</span>
                          </nuxt-link>
                         <span><a-icon type="download" title="点击下载"/></span>
                         <span>2019-04-03</span>
                   
                </li>
                                <li>
                         <nuxt-link :to="`/invite/tendering/book`">
                         <span></span>
                         <span>如何进行物流项目招投标</span>
                          </nuxt-link>
                         <span><a-icon type="download" title="点击下载"/></span>
                         <span>2019-04-03</span>
                   
                </li>
            </ul>
        </div>
    </div>
    <!-- 搜索 -->
   <!--  <div class="invite-soso">
      <a-form layout="inline" :form="form" class='container-1200'>
              <a-form-item label='出发地' :span='10'>
                <a-input v-model="fromCity"  placeholder="请选择出发地" :span='14' style='width:190px;'   readOnly @click="magSvgShowMap('departureCar')">
               </a-input>
             </a-form-item>
              <a-form-item label='到达地'>
                <a-input v-model="toCity" placeholder="请选择车辆常驻地" style='width:190px;'  readOnly @click="magSvgShowMap('destinationCar')">
               </a-input>
              </a-form-item>
              <a-form-item label='运输类型'>
                 <a-select style='width:140px;' placeholder="全部" :defaultValue="transType" v-model="transType"  @change="transTypeChange">
                  <a-select-option value="">全部</a-select-option>
                  <a-select-option v-for="(item,index) in highwayList" :key="index" :value="item.dictKey">{{item.dictValue}}</a-select-option>
                </a-select>
             </a-form-item>
              <a-form-item>
                <a-button class='ant-btn-primary' type="primary" @click="logisticsTendereesType()">
                  搜索
               </a-button>
             </a-form-item>
             <a-form-item>
                <a-button class='ant-btn-default'  @click="reset">
                  重置
               </a-button>
             </a-form-item>
           </a-form>
    </div> -->
    <!-- 招标信息 -->
    <div class="bidding-information container-1200">
        <div class="bid-name">
            <span class="bidd-icon"></span>
            <span>招标信息</span>
            <nuxt-link :to="`/invite/tendering`">更多</nuxt-link>
        </div>
        <div class="bidding-listDates">
               <a-list itemLayout="vertical" size="large" :pagination="false" :dataSource="listData" class='bid-list'>
                    <a-list-item slot="renderItem" slot-scope="item, index" key="item.title">
                      <nuxt-link :to='`/invite/tendering/${item.tendId}`'>
                        <ul>
                            <li>
                                <span></span>
                                <span class="bid-main-title">[{{item.transTypeName}}] {{item.tendTitle || '暂无'}}</span>
                                <span>{{item.createTime&&item.createTime.split(' ')[0]}}</span>
                            </li>
                        </ul>
                      </nuxt-link>
                    </a-list-item>
              </a-list>
              <div class="bid-pic">
                <nuxt-link to="../../corp">
                    <img src="./../.././static/img/chain/logistics.png" alt="">
                </nuxt-link>
              </div>
        </div>
    </div>
    <!-- 中标信息 -->
    <div class="bidding-information container-1200 winbid-information">
        <div class="bid-name">
            <span class="bidd-icon"></span>
            <span>中标信息</span>
            <nuxt-link :to="`/invite/windbidding`">更多</nuxt-link>
        </div>
        <div class="bidding-listDates">
               <a-list itemLayout="vertical" size="large" :pagination="false" :dataSource="windbiddingData" class='bid-list'>
                    <a-list-item slot="renderItem" slot-scope="item, index" key="item.title">
                      <nuxt-link :to='`/invite/windbidding/${item.tendId}`'>
                        <ul>
                            <li>
                                <span></span>
                                <span class="bid-main-title">[{{item.transTypeName}}] {{item.tendTitle || '暂无'}}
                                  <i v-if="item.tendStatus  === 0">招标中</i>
                                  <i v-if="item.tendStatus  === 1">中标</i>
                                </span>
                                <span>{{item.createTime && item.createTime.split(' ')[0]}}</span>
                            </li>
                        </ul>
                      </nuxt-link>
                    </a-list-item>
              </a-list>
              <div class="bid-pic">
                <nuxt-link to="../../corp">
                    <img src="./../.././static/img/chain/logistics.png" alt="">
                </nuxt-link>
              </div>
        </div>
    </div>
     <!--地图Svg显示位置-->
    <map-svg ref="mapSvgDialog" @change="mapSvgCall" @distance="distanceCall"></map-svg>
 </div>
</template>

<script>

export default {
    data () {
    return {
        fromCity:'',
        toCity:'',
        transType:'',
        highwayList:[],
         // 起运地地址
        departureCar: '',
        destinationCar: '',
        departureSupply: '',
        destinationSupply: '',
        departureStorage: '',
        destinationStorage: '',
        infomationData: [],
        listData: [],
        // 数据列表
        windbiddingData:[],
    }
  },
    beforeCreate() {
    this.form = this.$form.createForm(this);
   },
    created: function() {
      this.logisticsTenderees();//招标
      this.findBidsList();//中标
      this.logisticsTendereesType();//地图查询
      this.infoCommonDict(11)
   },
  methods: {
    // 字典表接口 
      async infoCommonDict (type) {
          const res = await this.$store.dispatch('infoCommonDict',{
            dictType: type,
            pageSize: 99,
            pageNum: 1
          })
          if (res.status) {
            switch(type){
              case 31: this.highwayList = res.data.rows; break;
            }
          } 
      },
       // 运输类型切换
      transTypeChange(key){
        this.transType = key;
      },
      // 获取招标分类列表查询
      async logisticsTenderees () {
        const res = await this.$store.dispatch('info/logisticsTenderees',{
          pageSize: 7,
          pageIndex: 1,
          tendStatus: 0
        })
        if (res.status) {
          this.listData = res.data&&res.data.rows || [];
          // this.paginationBid.total = res.data.total || 0;
        } 
      },
      // 获取中标分类列表查询
      async findBidsList () {
          const res = await this.$store.dispatch('info/logisticsTenderees',{
            pageSize: 7,
            pageIndex: 1,
            tendStatus: 1
          })
          if (res.status) {
            this.windbiddingData = res.data&&res.data.rows || [];
            // console.log(this.windbiddingData,12344)
          } 
      },
      // 地图查询
      async logisticsTendereesType () {
        const res = await this.$store.dispatch('info/logisticsTenderees',{
          // fromCity:this.fromCity,
          // toCity:this.toCity,
          transType:this.transType,
          beginPlace: this.fromCity,
          endPlace: this.toCity,
        })
        if (res.status) {
          this.infomationData = res.data;
          console.log('search:',res)
        } 
      },
     // 省市地图回调
      mapSvgCall (d) {
        console.log(d)
        this[d.name] = d.provCityArea;
          if(d.name=='departureCar'){
            this.fromCity = d.provCityArea;
          }
          if(d.name=='destinationCar'){
            this.toCity = d.provCityArea;
          }      
      },
      // 重置
      reset(){
        this.fromCity = ''
        this.toCity = ''
        this.transType = ''
        this.logisticsTenderees();
       },
      // 起运地
      magSvgShowMap (name) {
        this.$refs.mapSvgDialog.mapSvgVisible( name,2,'','','' );
      },
      // 调用距离返回
      distanceCall (num) {
      },
      //查询招标信息分页切换
  },
}
</script>
<style lang="scss">
@import "../../assets/css/invite/inviteindex.scss";
</style>
